<script setup>
import { ref, onMounted } from 'vue';
import { Icon, Empty, List, Cell, CellGroup } from 'vant';
import axios from "@/utils/axios.js"
import { useUserStore } from "@/stores/user.js";
import {useRouter}   from "vue-router";

const router =  useRouter();

const users = useUserStore().user;
const loading = ref(false);
const finished = ref(false);

// 点赞的词条数据
const likedEntries = ref([
  /*{
    id: 1,
    entryName: '网络流行语解析',
    createdAt: '2025-09-19T15:45:00',
    likes: 342,
    collects: 89
  },
  {
    id: 2,
    entryName: 'YYDS的起源与发展',
    createdAt: '2025-09-18T11:20:00',
    likes: 567,
    collects: 123
  },
  {
    id: 3,
    entryName: '2025年十大网络热词',
    createdAt: '2025-09-17T16:30:00',
    likes: 891,
    collects: 256
  },
  {
    id: 4,
    entryName: '元宇宙术语解析',
    createdAt: '2025-09-14T09:30:00',
    likes: 432,
    collects: 78
  }*/
]);

const us = JSON.parse(sessionStorage.getItem("user"));
const init = () => {
  axios.get(`api/forumLikes/getLike/${us.userId}`)
      .then(res => {
        likedEntries.value = res.data;
      })
      .catch(error => {
        console.error('获取点赞历史失败:', error);
      });
}

onMounted(() => {
  init();
});

// 格式化时间
const formatTime = (timeString) => {
  const date = new Date(timeString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 查看词条详情
const viewEntry = (entry) => {
  console.log("传参：",entry)
  router.push({ name: 'entryWithId', params: { entryId: entry } });
};

// 加载更多数据
const onLoad = () => {
  setTimeout(() => {
    // 模拟加载更多数据
    loading.value = false;
    finished.value = true;
  }, 1000);
};
</script>

<template>
  <van-nav-bar
      title="点赞历史"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      safe-area-inset-top
  />
  <div class="user-like-history">
    <!-- 标题区域 -->
    <div class="header">
      <h1>我的点赞历史</h1>
      <p>查看您点赞过的所有词条</p>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 空状态 -->
      <van-empty
          v-if="likedEntries.length === 0"
          description="您还没有点赞过任何词条"
          class="empty-state"
      />

      <!-- 点赞列表 -->
      <van-list
          v-else
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <van-cell-group>
          <van-cell
              v-for="entry in likedEntries"
              :key="entry.entryId"
              class="entry-item"
              @click="viewEntry(entry.entryId)"
          >
            <template #icon>
              <van-icon name="like" class="like-icon" color="#ff6034" />
            </template>
            <template #title>
              <div class="entry-content">
                <div class="entry-title">{{ entry.entryName }}</div>
                <div class="entry-info">
                  <span class="time">点赞时间: {{ formatTime(entry.createdAt) }}</span>
                  <div class="stats-container">
                    <div class="stat-item like-stat">
                      <van-icon name="like-o" size="14" />
                      <span>{{ entry.likes || 0 }}</span>
                    </div>
                    <div class="stat-item collect-stat">
                      <van-icon name="star-o" size="14" />
                      <span>{{ entry.collects || 0 }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>

<style scoped>
.user-like-history {
  --primary-color: #ff6034;
  --secondary-color: #ff976a;
  --text-primary: #303133;
  --text-secondary: #606266;
  --text-muted: #909399;
  --bg-color: #f7f8fa;
  --card-bg: #ffffff;
  --border-color: #ebeef5;
  --like-color: #ff6034;
  --collect-color: #ffb11b;

  min-height: 100vh;
  background-color: var(--bg-color);
  padding: 0 16px 16px;
  box-sizing: border-box;
}

/* 标题区域 */
.header {
  text-align: center;
  padding: 24px 0;
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: white;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(255, 96, 52, 0.2);
}

.header h1 {
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 600;
  margin-bottom: 8px;
}

.header p {
  font-size: clamp(12px, 3vw, 14px);
  opacity: 0.9;
}

/* 内容区域 */
.content {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 空状态 */
.empty-state {
  padding: 40px 0;
}

/* 词条项 */
.entry-item {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s;
  cursor: pointer;
}

.entry-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.entry-item:last-child {
  border-bottom: none;
}

.like-icon {
  font-size: 20px;
  margin-right: 12px;
}

.entry-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entry-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.entry-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

.stats-container {
  display: flex;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.like-stat {
  color: var(--like-color);
}

.collect-stat {
  color: var(--collect-color);
}

.time {
  color: var(--text-muted);
}

/* 响应式调整 */
@media (max-width: 480px) {
  .user-like-history {
    padding: 0 12px 12px;
  }

  .header {
    padding: 16px 0;
  }

  .entry-item {
    padding: 12px;
  }

  .entry-title {
    font-size: 15px;
  }

  .entry-info {
    flex-direction: column;
    gap: 8px;
  }

  .stats-container {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .user-like-history {
    max-width: 800px;
    margin: 0 auto;
  }
}
</style>